<template>
  <view class="new-address font-32" :class="{ 'def-bg': def_bg }" :style="my_style">
    <view class="bg-white">
      <view class="u-p-l-24 u-p-r-24 flex-row item">
        <text class="label">收货人</text>
        <input
          type="text"
          class="u-flex-1"
          maxlength="20"
          v-model="form.name"
          placeholder="请填写收货人姓名"
        />
      </view>
      <view class="u-p-l-24 u-p-r-24 flex-row item">
        <text class="label">联系电话</text>
        <input
          type="number"
          class="u-flex-1"
          maxlength="11"
          v-model="form.mobile"
          placeholder="请填写联系电话号码"
        />
      </view>
      <view class="u-p-l-24 u-p-r-24 flex-row item" @click="showSelect">
        <text class="label">所在地区</text>
        <view class="flex-between u-flex-1">
          <text class="u-flex-1 light-color" v-if="!region">请选择</text>
          <text class="u-flex-1" v-if="region">{{ region }}</text>
          <!-- <u-icon name="arrow-right" color="#666" /> -->
        </view>
      </view>
      <view class="u-p-l-24 u-p-r-24 item">
        <text class="label">详细地址</text>
        <input
          type="text"
          class="u-flex-1"
          v-model="form.address"
          maxlength="50"
          placeholder="请填写详细地址"
        />
      </view>
    </view>
    <view class="bg-white u-p-l-24 u-p-r-24 flex-between u-m-b-20 h-96">
      <text>设为默认地址</text>
      <switch :checked="is_default" color="#4DD865" @change="changeDefault" />
    </view>
    <view v-if="id" class="cell bg-white u-p-24 flex-between" @click="show_confirm = true">
      <text class="main-color">删除该地址</text>
    </view>

    <view class="box-shadow u-p-l-24 u-p-r-24 u-p-t-10 u-p-b-10 bg-white white-color fixed-0">
      <view class="btn" @click="newAddress">保存</view>
    </view>
    <!-- 省市区选择 -->
    <select-address
      ref="address"
      :value="show_address"
      @getAddress="getAddress"
      @close="show_address = false"
    />
    <!-- 确认删除 -->
    <confirm-alert
      :show.sync="show_confirm"
      confirmTitle="确定要删除该地址吗？"
      @confirm="confirmDel"
      cancel-text="我再想想"
      confirm-text="确认删除"
    />
    <!-- 确认保存编辑结果 -->
    <confirm-alert
      :show.sync="show_confirm_updata"
      confirmTitle="是否保存本次编辑结果"
      @confirm="newAddress"
      @cancel="back"
      cancel-text="我再想想"
      confirm-text="确定"
    />
  </view>
</template>

<script>
  import SelectAddress from '@/components/address/SelectAddress.vue'
  import ConfirmAlert from '@/components/common/Confirm.vue'
  export default {
    data() {
      return {
        id: '',
        form: {
          mobile: '',
          name: '',
          province_id: '',
          city_id: '',
          district_id: '',
          community_id: '',
          address: '',
          full_address: '',
          district_name: '',
          community_name: '',
        },
        region: '',
        is_default: false,
        show_address: false,
        show_confirm: false, // 删除确认
        show_confirm_updata: false, // 返回编辑确认
        def_bg: true,
      }
    },
    components: {
      SelectAddress,
      ConfirmAlert,
    },
    onLoad(options) {
      this.id = options.id || ''
      uni.setNavigationBarTitle({
        title: this.id ? '编辑地址' : '添加地址',
      })
      if (this.id) {
        this.def_bg = false
      }
      if (this.id) {
        this.getAddressInfo()
      }
    },
    onBackPress(e) {
      if (e.form === 'backbutton') {
        this.show_confirm_updata = true
        return
      }
    },
    methods: {
      // 显示
      showSelect() {
        // console.log(this.$refs.address)
        if (this.id) {
          let params = {
            ...this.form,
          }
          this.$refs.address.showAddress(params)
        } else {
          this.$refs.address.showAddress({})
        }
      },
      // 获取地址详情
      async getAddressInfo() {
        const res = await this.$api.common.user('getAddressInfo', {
          id: this.id,
        })
        if (res.code === 200) {
          let { province_name, city_name, district_name, community_name, is_default } = res.data
          this.form = res.data
          this.is_default = +is_default === 1
          city_name = city_name ? '-' + city_name : city_name
          district_name = district_name ? '-' + district_name : district_name
          community_name = community_name ? '-' + community_name : community_name
          this.region = `${province_name}${city_name}${district_name}${community_name}`
        }
      },
      // 获取省市区
      getAddress(params) {
        this.form.province_id = params.item_value1
        this.form.city_id = params.item_value2
        this.form.district_id = params.item_value2 == params.item_value3 ? '' : params.item_value3
        this.form.community_id = params.item_value3 == params.item_value4 ? '' : params.item_value4
        this.form.province_name = params.item_name1
        this.form.city_name = params.item_name2
        this.form.district_name = params.item_name3
        this.form.community_name = params.item_name4
        params.item_name2 = params.item_name2 ? '-' + params.item_name2 : params.item_name2
        params.item_name3 = params.item_name3 ? '-' + params.item_name3 : params.item_name3
        params.item_name4 = params.item_name4 ? '-' + params.item_name4 : params.item_name4
        this.region = `${params.item_name1}${params.item_name2}${params.item_name3}${params.item_name4}`
      },
      changeDefault(e) {
        const { value } = e.target
        console.log(value)
        this.is_default = value
      },
      // 新增编辑地址
      async newAddress() {
        const { id, form, is_default } = this
        let params = {
          id,
          ...form,
          is_default: is_default ? 1 : 0,
        }
        if (!params.name) {
          uni.showToast({
            icon: 'none',
            title: '请填写收货人姓名',
          })
          return
        }
        if (!params.mobile || params.mobile.length !== 11) {
          uni.showToast({
            icon: 'none',
            title: '请填写联系电话号码',
          })
          return
        }
        if (!params.province_id) {
          uni.showToast({
            icon: 'none',
            title: '请选择所在地区',
          })
          return
        }
        if (!params.address) {
          uni.showToast({
            icon: 'none',
            title: '请填写详细地址',
          })
          return
        }
        params.full_address = `${this.region}${params.address}`
        const res = await this.$api.common.user(id ? 'editAddress' : 'addAddress', params)
        if (res.code === 200) {
          uni.showToast({
            icon: 'success',
            title: res.message,
          })
          this.back()
        }
      },
      /**
       * 用户地址-删除地址
       */
      async confirmDel() {
        let params = {
          id: this.id,
        }
        const res = await this.$api.common.user('deleteAddress', params)
        if (res.code === 200) {
          this.$u.toast('删除成功')
          this.back()
        }
      },
      // 返回上一页
      back() {
        // 获取页面栈
        var pages = getCurrentPages()
        if (pages.length > 1) {
          // 上一个页面实例对象
          var prePage = pages[pages.length - 2]
          if (prePage.route === 'views/user/address/list') {
            // 触发上个界面
            // #ifdef H5
            prePage.getAddressList()
            // #endif
            // #ifdef MP-WEIXIN||APP-PLUS
            prePage.$vm.getAddressList()
            // #endif
          } else if (prePage.route === 'views/settlement/settlement') {
            // 触发上个界面
            // #ifdef H5
            prePage.orderPayment()
            // #endif
            // #ifdef MP-WEIXIN||APP-PLUS
            prePage.$vm.orderPayment()
            // #endif
          }
        }
        this.goBack(1)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .def-bg {
    background-color: #fff;
  }

  .new-address {
    min-height: 100vh;

    .item {
      width: 100%;
      min-height: 96rpx;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      .label {
        width: 152rpx;
      }

      .uni-input-placeholder {
        color: #999 !important;
      }
    }

    .item:last-child {
      display: flex;
      padding-bottom: 52rpx;
      border-bottom: 20rpx solid #f5f5f5;
      flex-direction: column;
    }

    .cell {
      width: 100%;
      height: 96rpx;
      margin-bottom: 100rpx;
    }

    .btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: var(--color);
      border-radius: 210rpx;
    }

    .box-shadow {
      box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0, 0, 0, 0.1);
    }
  }
</style>
